import { Input, Collapse, Empty } from 'antd'
import { useState } from 'react'
import { useEffect } from 'react'
import { templateStepTool } from '@/api/type-tree.js'
import './index.less'
import SiderBar from './siderBar.jsx'
import { 
  PlusCircleOutlined, 
  MinusCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons'

const StencilPanel = ({ typeCode, templateType, templateName, graph }) => {
  const [typeTreeData, setTypeTreeData] = useState([])
  const [typeData, setTypeData] = useState([])
  const [defaultActiveKey, setDefaultActiveKey] = useState([])

  const [keyword, setKeyword] = useState('')

  const onKeywordChagne = (e) => {
    const value = e.target.value
    setKeyword(value)
  }

  const requestTypeTree = () => {
    templateStepTool({ typeCode }).then((res) => {
      res.data.forEach((type) => {
        type.children.forEach((item) => {
          item.typeCode = typeCode
        })
      })
      setTypeData(res.data)
      onKeywordChagne({
        target: {
          value: keyword,
        },
      })
    })
  }

  const computedHeight = (children) => {
    return Math.ceil(children.length / 3) * 64
  }

  useEffect(() => {
    requestTypeTree()
  }, [])

  useEffect(() => {
    let arrChild = []
    if (keyword === '') {
      arrChild = [...typeData]
    } else {
      typeData.map((item) => {
        if (item.children && item.children.length > 0) {
          const children = item.children.filter((ii) =>
            ii.template_name.includes(keyword)
          )
          if (children.length > 0) {
            item.children = children
            arrChild = [...arrChild, item]
          }
        }
      })
    }
    setTypeTreeData(arrChild)
    setDefaultActiveKey(arrChild.map((item) => item.id))
  }, [graph, typeData, keyword])

  return (
    <div className="com-container top-bottom-layout">
      <div style={{ padding: '8px' }}>
        <Input
          value={keyword}
          onChange={onKeywordChagne}
          placeholder={`请输入${templateName}`}
          style={{ marginBottom: '8px' }}
          autoComplete="off"
        />
      </div>

      <div className="com-content flex-1">
        <div className="scroll-y">
          {defaultActiveKey.length > 0 && (
            <Collapse
              expandIcon={({ isActive }) =>
                isActive ? <CaretDownOutlined style={{color: '#ffffff'}} /> : <CaretUpOutlined style={{color: '#ffffff'}}  />
              }
              ghost
              defaultActiveKey={defaultActiveKey}
            >
              {typeTreeData.map((item) => {
                return (
                  <Collapse.Panel header={item.name} key={item.id}>
                    {item.children.length === 0 ? (
                      <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        imageStyle={{ height: 30 }}
                        description="暂无数据"
                      />
                    ) : (
                      <div
                        className="tool-wrap"
                        style={{
                          height: computedHeight(item.children),
                        }}
                      >
                        <SiderBar
                          domId={`stencil_${item.id}`}
                          treeData={item.children}
                          graph={graph}
                        />
                      </div>
                    )}
                  </Collapse.Panel>
                )
              })}
            </Collapse>
          )}
        </div>
      </div>
    </div>
  )
}

export default StencilPanel
